<template>
  <div class="home">
    <div style="margin: 20px 0">
      <el-button
          type="primary"
          style="margin: 10px"
          @click="addFormVisible = true"
      >新增</el-button
      >
      <el-input
          v-model="search"
          placeholder="输入关键字查询"
          style="width: 100px"
      />
      <el-button @click="handleSearch">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" stripe height="450">
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="name" label="模板名称" width="80"></el-table-column>
      <el-table-column prop="s0" label="初始易感人数" width="80"></el-table-column>
      <el-table-column prop="e0" label="初始潜伏人数" width="80"></el-table-column>
      <el-table-column prop="i0" label="初始感染人数" width="80"></el-table-column>
      <el-table-column prop="r0" label="初始治愈人数" width="80"></el-table-column>
      <el-table-column prop="r1" label="前期感染者每天接触人数" width="80"></el-table-column>
      <el-table-column prop="pr1" label="后期感染者每天接触人数" width="80"></el-table-column>
      <el-table-column prop="b1" label="感染者传染概率" width="80"></el-table-column>
      <el-table-column prop="r2" label="前期潜伏者接触人数" width="80"></el-table-column>
      <el-table-column prop="pr2" label="后期潜伏者接触人数" width="80"></el-table-column>
      <el-table-column prop="b2" label="潜伏者传染概率" width="80"></el-table-column>
      <el-table-column prop="a" label="前期潜伏转感染概率" width="80"></el-table-column>
      <el-table-column prop="pa" label="后期潜伏转感染概率" width="80"></el-table-column>
      <el-table-column prop="y" label="前期治愈概率" width="80"></el-table-column>
      <el-table-column prop="py" label="后期治愈概率" width="80"></el-table-column>
      <el-table-column prop="n" label="总人数" width="80"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="80"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="80"></el-table-column>
      <el-table-column prop="spliceDate" label="分割日期" width="80"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
          >编辑</el-button
          >
          <el-button @click="handleApply(scope.row)" type="text" size="small"
          >应用</el-button
          >
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        layout="prev, pager, next, jumper"
        :total="50"
        style="text-align: center"
        :current-page.sync="currentPage"
        @next-click="nextClick"
        @prev-click="prevClick"
        @current-change="currentChange"
    >
    </el-pagination>
    <!-- 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，
      除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，
      size用于设置每页显示的页码数量。 -->

    <!-- 新增弹窗 -->
    <el-dialog title="新增模板" :visible.sync="addFormVisible">
      <el-form
          :model="addForm"
          status-icon
          ref="addForm"
          label-width="100px"
          class="demo-ruleForm"
      >
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="模板名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="初始易感人数" prop="s0">
          <el-input v-model="addForm.s0"></el-input>
        </el-form-item>
        <el-form-item label="初始潜伏人数" prop="e0">
          <el-input v-model="addForm.e0"></el-input>
        </el-form-item>
        <el-form-item label="初始感染人数" prop="i0">
          <el-input v-model="addForm.i0"></el-input>
        </el-form-item>
        <el-form-item label="初始治愈人数" prop="r0">
          <el-input v-model="addForm.r0"></el-input>
        </el-form-item>
        <el-form-item label="前期感染每日接触人数" prop="r1">
          <el-input v-model="addForm.r1"></el-input>
        </el-form-item>
        <el-form-item label="后期感染每日接触人数" prop="r1">
          <el-input v-model="addForm.pr1"></el-input>
        </el-form-item>
        <el-form-item label="感染者传染概率" prop="b1">
          <el-input v-model="addForm.b1"></el-input>
        </el-form-item>
        <el-form-item label="前期潜伏者每日接触人数" prop="r2">
          <el-input v-model="addForm.r2"></el-input>
        </el-form-item>
        <el-form-item label="后期潜伏者每日接触人数" prop="r2">
          <el-input v-model="addForm.pr2"></el-input>
        </el-form-item>
        <el-form-item label="潜伏者传染概率" prop="b2">
          <el-input v-model="addForm.b2"></el-input>
        </el-form-item>
        <el-form-item label="前期潜伏转感染概率" prop="a">
          <el-input v-model="addForm.a"></el-input>
        </el-form-item>
        <el-form-item label="后期潜伏转感染概率" prop="a">
          <el-input v-model="addForm.pa"></el-input>
        </el-form-item>
        <el-form-item label="前期治愈率" prop="y">
          <el-input v-model="addForm.y"></el-input>
        </el-form-item>
        <el-form-item label="后期治愈率" prop="y">
          <el-input v-model="addForm.py"></el-input>
        </el-form-item>
        <el-form-item label="总人数" prop="n">
          <el-input v-model="addForm.n"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-input v-model="addForm.startDate"></el-input>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-input v-model="addForm.endDate"></el-input>
        </el-form-item>
        <el-form-item label="分割日期" prop="endDate">
          <el-input v-model="addForm.spliceDate"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')"
          >提交</el-button
          >
          <el-button @click="resetForm('addForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑模板" :visible.sync="editFormVisible">
      <el-form
          :model="editForm"
          status-icon
          ref="editForm"
          label-width="100px"
          class="demo-ruleForm"
      >
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="模板名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="初始易感人数" prop="s0">
          <el-input v-model="editForm.s0"></el-input>
        </el-form-item>
        <el-form-item label="初始潜伏人数" prop="e0">
          <el-input v-model="editForm.e0"></el-input>
        </el-form-item>
        <el-form-item label="初始感染人数" prop="i0">
          <el-input v-model="editForm.i0"></el-input>
        </el-form-item>
        <el-form-item label="初始治愈人数" prop="r0">
          <el-input v-model="editForm.r0"></el-input>
        </el-form-item>
        <el-form-item label="前期感染每日接触人数" prop="r1">
          <el-input v-model="editForm.r1"></el-input>
        </el-form-item>
        <el-form-item label="后期感染每日接触人数" prop="r1">
          <el-input v-model="editForm.pr1"></el-input>
        </el-form-item>
        <el-form-item label="感染者传染概率" prop="b1">
          <el-input v-model="editForm.b1"></el-input>
        </el-form-item>
        <el-form-item label="前期潜伏者每日接触人数" prop="r2">
          <el-input v-model="editForm.r2"></el-input>
        </el-form-item>
        <el-form-item label="后期潜伏者每日接触人数" prop="r2">
          <el-input v-model="editForm.pr2"></el-input>
        </el-form-item>
        <el-form-item label="潜伏者传染概率" prop="b2">
          <el-input v-model="editForm.b2"></el-input>
        </el-form-item>
        <el-form-item label="前期潜伏转感染概率" prop="a">
          <el-input v-model="editForm.a"></el-input>
        </el-form-item>
        <el-form-item label="后期潜伏转感染概率" prop="a">
          <el-input v-model="editForm.pa"></el-input>
        </el-form-item>
        <el-form-item label="前期治愈率" prop="y">
          <el-input v-model="editForm.y"></el-input>
        </el-form-item>
        <el-form-item label="后期治愈率" prop="y">
          <el-input v-model="editForm.py"></el-input>
        </el-form-item>
        <el-form-item label="总人数" prop="n">
          <el-input v-model="editForm.n"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-input v-model="editForm.startDate"></el-input>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-input v-model="editForm.endDate"></el-input>
        </el-form-item>
        <el-form-item label="分割日期" prop="endDate">
          <el-input v-model="editForm.spliceDate"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')"
          >提交</el-button
          >
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 详情弹窗 -->

  </div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "PredictParam",
  data(){
    return{
      addFormVisible: false,
      editFormVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      addForm: {
        name: '',
        s0: '',
        e0: '',
        i0: '',
        r0: '',
        r1: '',
        pr1: '',
        b1: '',
        r2: '',
        pr2: '',
        b2: '',
        a: '',
        pa: '',
        y: '',
        py: '',
        n: '',
        startDate: '',
        endDate: '',
        spliceDate: ''
      },
      editForm: {
        name: '',
        s0: '',
        e0: '',
        i0: '',
        r0: '',
        r1: '',
        pr1: '',
        b1: '',
        r2: '',
        pr2: '',
        b2: '',
        a: '',
        pa: '',
        y: '',
        py: '',
        n: '',
        startDate: '',
        endDate: '',
        spliceDate: ''
      },
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      request.get("/bigScreen/predictionData/page",{
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search: "",
      }).then(res=>{
        if (res.success){
          this.tableData = res.result.records
        }
      })
    },
    handleSearch(){
      request.get("/bigScreen/predictionData/page",{
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search: this.search,
      }).then(res=>{
        if (res.success){
          this.tableData = res.result.records
        }
      })
    },
    handleApply(){
      //todo 要提供使用哪套参数
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "editForm") {
            request.post("/bigScreen/predictionData/edit", this.editForm).then((res) => {
              if (res.success) {
                this.editFormVisible = false;
                this.$message.success(res.message);
                this.load();
              }
            });
          }
          if (formName == "addForm") {
            request.post("/bigScreen/predictionData/edit", this.addForm).then((res) => {
              if (res.success) {
                this.addFormVisible = false;
                this.$message.success(res.message);
                this.load();
              }
            });
          }
        } else {
          // this.$message.waring("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
    handleEdit(row){
      this.editFormVisible = true;
      this.editForm = row;
    },
    handleDelete(index, row){
      request.delet("/bigScreen/predictionData/delete/" + row.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.load();
        }
      });
    },
    nextClick() {
      this.currentPage += 1;
      this.load();
    },
    prevClick() {
      this.currentPage -= 1;
      this.load();
    },
    currentChange() {
      this.load();
    },
  },
}
</script>
